<template>
  <t-config-provider :global-config="{ classPrefix: 't' }">
    <t-space direction="vertical" style="width: 100%; text-align: center">
      <t-row>
        <t-col :span="2">
          <t-select
            v-model="formData.lan_value"
            :options="formData.lan"
            defaultInputValue="1"
            placeholder="选择线路"
          ></t-select>
        </t-col>
        <t-col :span="9">
          <t-input
            v-model="formData.addr_value"
            placeholder="爱奇艺VIP视频地址"
          />
        </t-col>
        <t-col :span="1">
          <t-button
            @click="start_play"
            theme="danger"
            size="medium"
            style="width: 90%"
            >解析播放</t-button
          >
        </t-col>
      </t-row>

      <t-row>
        <t-col :span="1"> &nbsp; </t-col>
        <t-col :span="10">
          <!-- <div style="position: 'relative'; width: '100%'; height: '500px'"> -->
          <iframe
            :src="formData.iframe"
            id="iframe_player"
            width="100%"
            height="400px"
            allowtransparency="true"
            allowfullscreen="true"
            frameborder="0"
            scrolling="no"
            @load="adjustIframe"
            style="
              margin-top: 1px;
              background: #000
              url('//cdn.dgsldz.com/product/wildcat/images/tv/loading_550x550.gif')
                no-repeat center;
            "
          ></iframe>
          <!-- </div> -->
        </t-col>
        <t-col :span="1"> &nbsp; </t-col>
      </t-row>
    </t-space>
  </t-config-provider>
</template>

<script setup lang="ts">
import {} from "tdesign-icons-vue-next";
import { ref, reactive, onMounted } from "vue";

const form = ref("");

//定义个函数start_play
function start_play() { // click 函数
  var lan_value = formData.lan_value;
  var addr_value = formData.addr_value;
  var iframe = lan_value + addr_value;
  if ("" == addr_value || "" == lan_value) {
    alert("请输入视频地址和线路");
    return;
  }

  setTimeout(() => {  //设置mainForm的title
    aardio.set_title(addr_value).then(); // 设置mainForm的title
  }, 100);

  setTimeout(() => {  // 播放视频
    formData.iframe = iframe;
  }, 100);

  setTimeout(() => {  // 保存视频地址
    aardio.save_addr(addr_value).then();
  }, 100);
}

function load_addr() { // 加载视频地址
  aardio.get_addr().then(
    (res: string) => {
      //success
      formData.addr_value = res;
    },
    (res: any) => {
      //error
      console.error(res);
      formData.addr_value = "";
    }
  );
}

function load_lan() {  // 加载解析线路列表
  aardio.get_lan().then(
    (res: string) => {
      var lans: any = [];
      var json = JSON.parse(res);
      // console.log(json);
      json.forEach((element: any, index: number) => {
        lans.push({
          label: element.title + "",
          value: element.url + "",
          title: element.title + "",
        });
      });
      // console.log(lans);
      formData.lan = lans;
      formData.lan_value = lans[0].value;
    },
    (res: any) => {
      console.error(res);
    }
  );
}

function adjustIframe() {  // 适应窗口大小
  var ifm: any = document.getElementById("iframe_player");
  ifm.setAttribute("height", document.documentElement.clientHeight * 0.8);
  ifm.setAttribute("width", document.documentElement.clientWidth * 0.8);
}

onMounted(() => {  // 页面加载时
  // console.log("onMounted");
  setTimeout(() => {
    load_lan();// 加载解析线路列表
  }, 100);
  setTimeout(() => {
    load_addr();// 加载视频地址
  }, 100);
  setTimeout(() => {
    adjustIframe(); // 适应窗口大小
    window.addEventListener("resize", () => adjustIframe(), false);  // 注册resize事件,适应窗口大小
  }, 100);
});
const formData: any = reactive({
  lan_value: "",
  addr_value: "https://www.mgtv.com/b/465095/20444380.html" ,
  lan: [],
  iframe: "",
});
</script>

<style lang="less" scoped></style>
